<template>
  <div class="info">
    <el-row>
      <el-col :span="3" style="text-align: center"><el-icon><CircleCheck /></el-icon></el-col>
      <el-col :span="17" style="height: 104px;line-height: 104px">
        <div>
          <span>订单提交成功！！请完成支付</span>
        </div>
      </el-col>
      <el-col :span="4" style="height: 104px;line-height: 104px;text-align: right">
        <span>应付总额：</span>
        <span class="total">{{ total }}</span>
        <span> 元</span>
      </el-col>
    </el-row>
    <div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="订单详情" name="1">
          <el-row>
            <el-col :span="2">订单号:</el-col>
            <el-col :span="10">{{ order.id }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2">收货信息:</el-col>
            <el-col :span="10">{{ order.addrDetail }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2">商品名称:</el-col>
            <el-col :span="10">
              <div v-for="(orderDetail, index) in order.orderDetails" :key="index">
                {{ orderDetail.goods.name }}-{{ orderDetail.goods.color }}-{{ orderDetail.goods.version }}
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>

      </el-collapse>
    </div>
  </div>
  <div class="pay">
    <div>
      <div class="title">支付工具</div>
      <ul>
        <li>余额支付</li>
        <li>支付宝支付</li>
        <li>微信支付</li>
        <li>支付宝</li>
      </ul>
    </div>
    <div>
      <el-input type="password" v-model="payPassword" placeholder="请输入支付密码" style="margin: 10px 10px;width: 200px;"/>
      <el-button type="danger" @click="pay">支付</el-button>
    </div>
  </div>

</template>

<script setup>

import {useRoute} from "vue-router";
import orderApi from "@/api/OrderApi.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import router from "@/router/index.js";
import userApi from "@/api/UserApi.js";

const route = useRoute()
// 订单信息
const order = ref({})
// 总金额
const total = ref(0)
// 支付密码
const payPassword = ref('')

// 根据订单id查询数据
const getOrderInfo = () => {
  let orderId = route.query.orderId
  orderApi.getInfoById(orderId)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success("请尽快完成支付")
          order.value = resp.data
          getTotal()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 计算总金额
const getTotal = () => {
  let totalCache = 0
  order.value.orderDetails.forEach(orderDetail =>{
    totalCache = totalCache + orderDetail.count * orderDetail.price
  })

  total.value = totalCache
}

// 支付函数
const pay = async () => {
  // 验证密码
  let result = await userApi.verifyPayPassword(payPassword.value)
  if (result.code === 10000) {
    orderApi.pay(route.query.orderId,payPassword.value)
        .then(resp => {
          if (resp.code === 10000) {
            ElMessage.success(resp.msg)
            router.push('/user/center/order')
          } else {
            ElMessage.error(resp.msg)
          }
        })
  } else {
    ElMessage.error(result.msg)
  }

}

getOrderInfo()
</script>

<style scoped>
.info, .pay{
  margin-top: 30px;
  background-color: #FFFFFF;
  padding: 30px;
}

.info .el-icon {
  font-size: 100px;
  color: #83C446FF;

}

.info .total {
  font-size: 18px;
  font-weight: bold;
  color: var(--theme-color);
}

.pay .title {
  font-weight: bold;
  font-size: 18px;
}

.pay ul li {
  margin: 10px 10px;
  padding: 0px 10px;
  float: left;
  border: 1px solid #AAAAAA;
  height: 40px;
  line-height: 40px;
}


</style>